<html>
<script type="text/JavaScript" src="../js/jsDraw2D.js"></script>
<script type="text/JavaScript" src="../js/jsTools.js"></script>
<body>
<div id="canvas" style="overflow:hidden;position:relative;width:600px;height:500px;"></div>

<script type="text/javascript">

	var font1=new jsFont("arial","bold","10px");
	
	var today =  new Date();
	
	var gr=new jsGraphics(document.getElementById("canvas"));
	
	//gr.setOrigin(new jsPoint(0,0));
	//gr.setCoordinateSystem("default");
	
	//gr.showGrid(20);
	
	var col = new jsColor("gray");
	
	//Create jsPen object
	var pen = new jsPen(col,1);
	
	var startX=60;
	
	var startY=10;
	
	var dateGap=30;	
	var timeGap=10;
	
	
	
	var days=11;
	var times=15*6;
	
	var endX=startX+times*timeGap;
	var endY=startY+days*dateGap;
	
	document.getElementById("canvas").style.width = endX+10;
	
	document.getElementById("canvas").style.height = endY+10;
	

	
	var firstDay=new Date();
	

	// Conver the given time to the position x and can be draw easyly
	function convertTimeToPositionX(time){
		var timeArr = time.split(":");
		var hour = timeArr[0];
		var min = timeArr[1];
		var sec = timeArr[2];
		
		var lineStart = startX + (hour-9)*60 + min*1 + sec*1/60;
		return lineStart;
		
	}
	
	function convertDateToPositionY(dateString){
		var date = new Date(dateString);
		var differentDay=getDateDifference(date,firstDay);
		
		var lineStartY=startY + 40+ differentDay*dateGap;
		
		return lineStartY;
	}
	
	
	
	

	// 1 min = 1px;

	var currentDate = new Date() ;
	// draw date lines 
	
	
   for(i=0;i<=days;i++){
	   var pt1 = new jsPoint(startX,startY+i*dateGap);
	   var pt2 = new jsPoint(endX,startY+i*dateGap); 
	
	   
	   var textPt = new jsPoint(0,startY+i*dateGap+10);
	   
	   gr.drawText(currentDate.format("m/dd/yyyy"),textPt,font1);
	   
	   DateAdd(currentDate,"D",1);
	    
	   gr.drawLine(pen,pt1,pt2); 
   }
 
	//draw time lines
   
	var startTime=9;
 
 
	for(i=0;i<=times;i++){
	   
	  var pt1 = new jsPoint(startX+i*timeGap,startY);
	  var pt2 = new jsPoint(startX+i*timeGap,endY);
	  
	 
	  if(i % 6 == 0){
		  var textPt = new jsPoint(startX+i*timeGap-2,0);
		  var textTime=startTime;
		  gr.drawText(textTime,textPt,font1);
		  startTime  = startTime+1;
		  
		 
		  
		  gr.drawLine(pen,pt1,pt2);
	  }
	  
	    
   }
 
 
	
	  //draw the existing time
 	var existingSlot = [["03/02/2011","10:00:00"],["03/02/2011","10:30:00"]];
  
	 var lineStartX =  convertTimeToPositionX(existingSlot[0][1]);
	 var lineStartY =  convertDateToPositionY(existingSlot[0][0])
	 var pt1 = new jsPoint(lineStartX,lineStartY);
	 
	 
	 var lineStartX =  convertTimeToPositionX(existingSlot[1][1]);
	 var lineStartY =  convertDateToPositionY(existingSlot[1][0])
	 var pt2 = new jsPoint(lineStartX,lineStartY);
	 
	 
	 
		col = new jsColor("red");
		
		pen = new jsPen(col,10);
	

	    gr.drawLine(pen,pt1,pt2);
	    
	    var existingSlot = [["03/03/2011","10:00:00"],["03/03/2011","10:30:00"]];
	    
		 var lineStartX =  convertTimeToPositionX(existingSlot[0][1]);
		 var lineStartY =  convertDateToPositionY(existingSlot[0][0])
		 var pt1 = new jsPoint(lineStartX,lineStartY);
		 
		 
		 var lineStartX =  convertTimeToPositionX(existingSlot[1][1]);
		 var lineStartY =  convertDateToPositionY(existingSlot[1][0])
		 var pt2 = new jsPoint(lineStartX,lineStartY);
		 
		 
		 
			col = new jsColor("red");
			
			pen = new jsPen(col,10);
		

		    gr.drawLine(pen,pt1,pt2);
		    
		    var existingSlot = [["03/04/2011","12:00:00"],["03/04/2011","12:50:50"]];
		    
			 var lineStartX =  convertTimeToPositionX(existingSlot[0][1]);
			 var lineStartY =  convertDateToPositionY(existingSlot[0][0])
			 var pt1 = new jsPoint(lineStartX,lineStartY);
			 
			 
			 var lineStartX =  convertTimeToPositionX(existingSlot[1][1]);
			 var lineStartY =  convertDateToPositionY(existingSlot[1][0])
			 var pt2 = new jsPoint(lineStartX,lineStartY);
			 
			 
			 
				col = new jsColor("red");
				
				pen = new jsPen(col,10);
			

			    gr.drawLine(pen,pt1,pt2);
	    
	    
	
	
  
	
	
</script>	

</body>
</html>